<template>
  <NavMenu />
  <div class="bgrd">
    <div class="phishing-detector">
      <h1>钓鱼网站检测</h1>
      <div class="input-container">
        <input
          v-model="url"
          type="text"
          placeholder="请输入要检测的URL"
          @keyup.enter="detectPhishing"
          :disabled="isLoading"
        />
        <button @click="detectPhishing" :disabled="isLoading">
          {{ isLoading ? '检测中...' : '检测' }}
        </button>
      </div>
      
      <!-- 加载指示器 -->
      <div v-if="isLoading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>正在检测中，请稍候...</p>
      </div>
      
      <div v-if="result && !isLoading" class="result-container">
        <h2>检测结果</h2>
        <p :class="result.class">{{ result.message }}</p>
        <p v-if="result.source" class="result-source">结果来源: {{ result.source }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import NavMenu from './component/NavMenu.vue';

interface DatabaseResult {
  code: number;
  msg: string;
  data: string | null;
}

interface DetectionResult {
  is_phishing: boolean;
}

interface Result {
  message: string;
  class: string;
  source?: string;
}

export default defineComponent({
  name: 'PhishingDetector',
  components: {
    NavMenu
  },
  data() {
    return {
      url: '',
      result: null as Result | null,
      isLoading: false
    };
  },
  methods: {
    async detectPhishing(): Promise<void> {
      if (!this.url) {
        alert('请输入URL');
        return;
      }

      // 重置结果并开始加载
      this.result = null;
      this.isLoading = true;

      try {
        // 首先查询数据库
        const dbResponse = await fetch('http://localhost:8080/findWeb', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ webUrl: this.url })
        });

        if (!dbResponse.ok) {
          throw new Error('数据库查询失败');
        }

        const dbData: DatabaseResult = await dbResponse.json();

        // 如果数据库中有记录
        if (dbData.code === 1 && dbData.data !== null) {
          let message, classType;
          switch (dbData.data) {
            case '1':
              message = '⚠️ 这是一个钓鱼网站！';
              classType = 'phishing';
              break;
            case '2':
              message = '⚠️ 这是一个疑似钓鱼网站！';
              classType = 'suspicious';
              break;
            case '0':
              message = '✅ 这是一个安全的网站。';
              classType = 'safe';
              break;
            default:
              message = '❌ 未知的网站标签';
              classType = 'error';
          }
          
          this.result = {
            message,
            class: classType,
            source: '数据库记录'
          };
          return;
        }

        // 如果数据库中没有记录，调用检测接口
        const detectResponse = await fetch('http://localhost:5000/detect-phishing', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ url: this.url })
        });

        if (!detectResponse.ok) {
          throw new Error('检测请求失败');
        }

        const detectData: DetectionResult = await detectResponse.json();

        this.result = {
          message: detectData.is_phishing ? '⚠️ 这是一个钓鱼网站！' : '✅ 这是一个安全的网站。',
          class: detectData.is_phishing ? 'phishing' : 'safe',
          source: 'AI检测'
        };
      } catch (error) {
        console.error('检测失败:', error);
        this.result = {
          message: '❌ 检测失败，请稍后重试。',
          class: 'error'
        };
      } finally {
        this.isLoading = false;
      }
    }
  }
});
</script>

<style scoped>
/* 保留原有样式，并添加新的样式 */
.bgrd {
  height: 100vh;
  background-image: url('@/assets/bg1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phishing-detector {
  max-width: 600px;
  width: 100%;
  padding: 20px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
}

.input-container {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

input {
  width: 70%;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input:disabled {
  background-color: #f0f0f0;
}

button {
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover:not(:disabled) {
  background-color: #369f6e;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.result-container {
  margin-top: 20px;
}

.loading-container {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #42b983;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.phishing {
  color: red;
}

.safe {
  color: green;
}

.error {
  color: orange;
}

.suspicious {
  color: #FFA500; /* 橙色 */
}

.result-source {
  font-size: 0.8em;
  color: #666;
  margin-top: 5px;
}
</style>